<template>
    <div>
        <div class="articles">
            <ul>
                <li :key="index" v-for="(list,index) in articleList">
                    <el-card class="card" shadow="hover">
                        <div class="article-head">
                            <a href="javascript:void(0);"><span @click="detail(list.id)">{{list.title}}</span></a>
                        </div>
                        <div class="article-content">
                            <div class="articleOther">
                                <div class="article-summary">
                                    <p>
                                        {{list.summary}}...
                                    </p>
                                </div>
                                <div class="article-img">
                                    <div v-if="list.articleImg !=null">
                                        <img :src="list.articleImg" alt=""  style=" display: block;margin: auto;max-width: 100%;max-height: 100%">
                                    </div>
                                    <div v-else><img src="../../assets/articleImg.jpg" style=" display: block;margin: auto;max-width: 100%;max-height: 100%"/>
                                    </div>
                                </div>
                            </div>
                            <div class="article-foot">
                                <ul>
                                    <li>
                                        <i class="el-icon-user"></i>
                                        <span style="margin-left: 5px">{{list.user.zhName}}</span>
                                    </li>
                                    <li>
                                        <i class="el-icon-date"></i>
                                        <span style="margin-left: 5px">{{list.publishDate | setTime}}</span>
                                    </li>
                                    <li style="text-align: right">
                                        <el-tag @click="detail(list.id)" type="info"
                                                style="margin-right: 30px;cursor:pointer;" size="small" color="#f0f0f4">
                                            <span style="margin-right: 5px">详细阅读</span>
                                            <i class="el-icon-more-outline"></i>
                                        </el-tag>


                                    </li>
                                </ul>
                            </div>
                        </div>
                    </el-card>
                </li>
            </ul>
            <div class="page">
                <el-pagination
                        :hide-on-single-page="true"
                        background
                        :page-size="pageSize"
                        :current-page="currentPage"
                        @current-change="currentChange"
                        layout="prev, pager, next"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>


</template>

<script>
    export default {
        name: "content",
        data() {
            return {
                articleList: [],
                currentPage: 1,
                pageSize: 6,
                total: 1,
            }
        },
        methods: {
            initArticle() {
               let keyword = this.$route.query.keyword;
                let page = this.$route.params.page;
                if (page !== undefined && !isNaN(Number(page))) {
                    this.currentPage = page;
                }
                let url = 'blog/article/list?page=' + this.currentPage + '&size=' + this.pageSize;
                if(keyword != null && keyword.length>0 && keyword !== undefined){
                    url = url + '&keyword=' + keyword;
                }
                this.getRequest(url).then(resp => {
                    if (resp) {
                        this.articleList = resp.list;
                        this.total = resp.total;
                    }
                }).catch(err => {
                    this.$Message.error('加载数据失败!' + err);
                });
            },
            currentChange(page) {
                this.currentPage = page;
                this.initArticle();

                window.scroll(0,0);
            },
            detail(code) {
                this.$router.push({ path:`/index/detail/${code}`});
            },
        },
        mounted() {
            this.currentPage = 1;
            this.initArticle();
            window.scroll(0,0);
        },
        computed: {
            keyword: function () {
                window.scroll(0,0);//页面回到顶部
                return this.$route.query.keyword
            }
        },
        watch : {
            keyword (){
                this.initArticle()
            }
        }
    }
</script>

<style>
    .page {
        width: 100%;
        text-align: center;
    }

    .article-foot li:nth-of-type(3) {
        width: 30%;
        height: 30px;
        margin-left: 50px;
    }

    .article-foot li:nth-of-type(2) {
        height: 30px;
        width: 30%;
    }

    .article-foot li:nth-of-type(1) {
        height: 30px;
        width: 30%;
    }

    .article-foot ul li {
        font-size: 12px;
        line-height: 30px;
        display: inline-block;
        vertical-align: top;
    }

    .article-img {
        overflow: hidden;
        margin-left: 30px;
        margin-top: 3px;
        width: 180px;
        vertical-align: top;
        display: inline-block;
        height: 90px;
        border-radius: 10px;
    }

    .article-summary p {
        font-size: 16px;
        text-indent: 2em;
    }

    .article-summary {
        overflow: hidden;
        font-size: 1.1rem;
        line-height: 30px;
        padding-top: 15px;
        vertical-align: top;
        width: 400px;
        height: 100px;
        display: inline-block;
    }

    .articleOther {
        height: 100px;
    }

    .article-foot {
        margin-top: 5px;
        height: 35px;
    }

    .article-content {
    }

    .article-head a span {
        line-height: 45px;
        font-size: 25px;
    }

    a {
        color: #242424;
        text-decoration: none;
    }

    a:hover {
        color: #3273dc;
    }

    .article-head a {

    }

    .article-head {
        align-content: center;
        height: 45px;
        border-bottom: 1px solid rgb(230, 230, 230)
    }

    .article-tabs {
        vertical-align: top;
        height: 45px;
        width: 200px;
        display: inline-block;
        margin-left: 25px;
    }

    .el-card__body, p {
        padding: 0px;
        margin: 0px;
    }

    .articles {
        padding: 0px;
        width: 70%;
        margin-left: 30%;
    }

    ul, li, h3 {
        padding: 0px;
    }

    ul li {
        list-style-type: none;
    }

    .card {
        padding: 0px;
        width: 650px;
        height: 190px;
        padding-left: 20px;
        margin-left: 30px;
        margin-bottom: 10px;
    }

</style>